<template>
    <div class="programme px-20">
        <div v-if="isOpen" class="pt-15">
            <form-view
                :list="formMember"
                :gridFormItem="5"
                :height="0"
                row
            ></form-view>
        </div>
        <div class="fr-ac-jsb pb-15" :class="isOpen ? '' : 'pt-15'">
            <div>
                <el-button
                    v-for="item in buttonList"
                    color="#169bd5"
                    :key="item.id"
                    @click="buttonClick(item)"
                    >{{ item.title }}({{ item.total }})</el-button
                >
            </div>
            <el-button @click="isOpen = !isOpen">
                <el-icon>
                    <Search />
                </el-icon>
            </el-button>
        </div>
        <table-view
            :data="tableData"
            :propList="tableProp"
            :total="tableTotal"
            @pageClick="tablePage"
            @sortClick="tableSort"
            :spacing="20"
            :pageSize="15"
        ></table-view>
    </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { customLists } from "./volunteer";
import { useUserStore } from "@/store/userStore";
import { red, blue, purple, purpleWhite } from "@/comment/data";
import {
    updateMessage,
    time,
    updateOrGetValue,
    optionsArray,
    flieDownload,
} from "@/comment/method";
import { zxkm, sxkm, sex, year, getYear } from "./data";
const userStore = useUserStore();
const tableData = ref([]);
const tableProp = ref([
    {
        id: 1,
        prop: "id",
        label: "ID",
    },
    {
        id: 2,
        prop: "name",
        label: "姓名",
    },
    {
        id: 3,
        prop: "phone",
        label: "手机号",
    },
    {
        id: 4,
        prop: "year",
        label: "年份",
    },
    {
        id: 5,
        prop: "assistant",
        label: "助理",
    },
    {
        id: 6,
        prop: "filling",
        label: "填报师",
    },
    {
        id: 7,
        prop: "check",
        label: "审核员",
    },
    {
        id: 8,
        prop: "schedule",
        label: "服务进度",
        status: [],
    },
    {
        id: 9,
        prop: "time_limit",
        label: "填报服务时限",
        sortable: "custom",
    },
]);
const tableTotal = ref(0);
const buttonList = ref([
    {
        id: 1,
        title: "总计",
        total: 0,
        type: 1,
    },
    {
        id: 2,
        title: "已提交",
        total: 0,
        type: 2,
    },
    {
        id: 3,
        title: "未提交",
        total: 0,
        type: 3,
    },
    {
        id: 4,
        title: "已结单",
        total: 0,
        type: 4,
    },
]);
const scheduleCondition = ref({
    ksxx_name: "",
    phone: "",
    assistant: "",
    filling: "",
    check: "",
    schedule: "",
    time_limit: "",
    year: getYear,
});
const scheduleSort = ref({
    sort: "",
    sort_name: "",
});
const isOpen = ref(false);
const type = ref(1);
const page = ref(1);
const formMember = ref([
    {
        id: 1,
        prefix: false,
        type: "",
        label: "姓名/ID",
        model: "",
        prop: "ksxx_name",
        suffixIcon: "",
        rules: [],
        formType: "input",
        placeholder: "请输入姓名或ID",
        list: [],
    },
    {
        id: 2,
        prefix: false,
        type: "",
        label: "手机号",
        model: "",
        prop: "phone",
        suffixIcon: "",
        rules: [],
        formType: "input",
        placeholder: "请输入手机号",
        list: [],
    },
    {
        id: 3,
        prefix: false,
        type: "",
        label: "助理",
        model: "",
        prop: "assistant",
        suffixIcon: "",
        rules: [],
        formType: "input",
        placeholder: "请输入助理昵称",
        list: [],
    },
    {
        id: 4,
        prefix: false,
        type: "",
        label: "填报师",
        model: "",
        prop: "filling",
        suffixIcon: "",
        rules: [],
        formType: "input",
        placeholder: "请输入填报师昵称",
        list: [],
    },
    {
        id: 5,
        prefix: false,
        type: "",
        label: "审核员",
        model: "",
        prop: "check",
        suffixIcon: "",
        rules: [],
        formType: "input",
        placeholder: "请输入审核员昵称",
        list: [],
    },
    {
        id: 6,
        prefix: false,
        type: "",
        label: "服务进度",
        model: "",
        prop: "schedule",
        suffixIcon: "CaretBottom",
        rules: [],
        formType: "select",
        placeholder: "请选择",
        list: [
            { label: "请选择", value: "" },
            { label: "信息", value: "information" },
            { label: "专业", value: "major" },
            { label: "提交", value: "submit" },
            { label: "填报", value: "filling" },
            { label: "生成", value: "generate" },
            { label: "审核", value: "check" },
            { label: "结单", value: "completion" },
            { label: "录取", value: "enroll" },
        ],
    },
    {
        id: 9,
        prefix: false,
        type: "",
        label: "服务时限",
        model: "",
        prop: "time_limit",
        suffixIcon: "CaretBottom",
        rules: [],
        formType: "select",
        placeholder: "请选择",
        list: [
            { value: "", label: "请选择" },
            { value: 1, label: "一天" },
            { value: 2, label: "二天" },
            { value: 3, label: "三天" },
            { value: 4, label: "三天以上" },
        ],
    },
    {
        id: 7,
        prefix: false,
        type: "",
        label: "年份",
        model: getYear,
        prop: "year",
        suffixIcon: "CaretBottom",
        rules: [],
        formType: "select",
        placeholder: "请选择",
        list: optionsArray(year),
    },
    {
        id: 8,
        prefix: false,
        type: "",
        label: "",
        model: "",
        prop: "",
        suffixIcon: "",
        rules: [],
        formType: "null",
        placeholder: "",
        list: [
            {
                label: "查询",
                value: "查询",
                type: "query",
                style: purple,
                void: (val) => {
                    scheduleCondition.value = val;
                    list(val, 1, type.value, scheduleSort.value);
                },
            },
            {
                label: "重置",
                value: "重置",
                type: "reset",
                style: purpleWhite,
                void: (val) => {
                    scheduleCondition.value = val;
                    list(val, 1, type.value, scheduleSort.value);
                },
            },
        ],
    },
]);
const list = async (condition, page, type, sort) => {
    let data = {
        ...condition,
        limit: 15,
        page: page,
        province: userStore.user.province,
        ksxx_sxkm: "",
        ksxx_zxkm: "",
        min_score: "",
        max_score: "",
        remark: "",
        type: type,
        ...sort,
    };
    const res = await customLists(data);
    let list = res.lists.map((item) => {
        return {
            ...item,
            time_limit: time(item.time_limit),
        };
    });
    let status = res.lists.map((item, ind) => {
        return {
            id: ind + 1,
            信息: item.information_status,
            专业: item.major_status,
            提交: item.submit_status,
            填报: item.filling_status,
            生成: item.generate_status,
            审核: item.check_status,
            结单: item.completion_status,
            录取: item.enroll_status,
        };
    });
    updateOrGetValue(8, "status", tableProp.value, status);
    updateOrGetValue(1, "total", buttonList.value, res.total);
    updateOrGetValue(2, "total", buttonList.value, res.total_submit);
    updateOrGetValue(3, "total", buttonList.value, res.total_unsubmit);
    updateOrGetValue(4, "total", buttonList.value, res.total_completion);
    tableData.value = list;
    switch (type) {
        case 1:
            tableTotal.value = res.total;
            break;
        case 2:
            tableTotal.value = res.total_submit;
            break;
        case 3:
            tableTotal.value = res.total_unsubmit;
            break;
        case 4:
            tableTotal.value = res.total_completion;
            break;
    }
};
const tablePage = (val) => {
    page.value = val;
    list(scheduleCondition.value, page.value, type.value, scheduleSort.value);
};
const tableSort = (val) => {
    switch (val.order) {
        case "descending":
            scheduleSort.value.sort = "desc";
            scheduleSort.value.sort_name = val.prop;
            break;
        case "ascending":
            scheduleSort.value.sort = "asc";
            scheduleSort.value.sort_name = val.prop;
            break;
        case null:
            scheduleSort.value.sort = "";
            scheduleSort.value.sort_name = "";
            break;
    }
    list(scheduleCondition.value, page.value, type.value, scheduleSort.value);
};
const buttonClick = (val) => {
    type.value = val.type;
    list(scheduleCondition.value, 1, type.value, scheduleSort.value);
};
onMounted(() => {
    list(scheduleCondition.value, 1, type.value, scheduleSort.value);
});
</script>
<style lang="scss" scoped></style>
